<template>
  <div>
      <!-- <breadcrumb></breadcrumb> -->

      <h2 style="color: gray;">店铺详情</h2>
      <el-divider></el-divider>
      <div @click="$router.go(-1)" style="width: 10px; height: 10px;">
         <i class="el-icon-arrow-left"></i>
      </div>
      <br>
      <!-- 详情 -->
       <template v-if="details">
            <el-descriptions  direction="vertical" :column="3" border>

                <!-- 商品基本信息 -->
                <el-descriptions-item label="商品名称">{{details.title}}</el-descriptions-item>
                <el-descriptions-item label="备注">
                    <el-tag v-show="details.isNew === 'false'" size="small" >常规</el-tag>
                    <el-tag  v-show="details.isNew === 'true'" size="small" type="warning">新品</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="商品图片">
                    <div class="demo-image__preview">
                        <el-image 
                            style="width: 100px; height: 100px"
                            :src="url" 
                            :preview-src-list="srcList">
                        </el-image>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="商品介绍内容">{{details.explains}}</el-descriptions-item>
            </el-descriptions>
        </template>
      <template v-else>
          <el-empty>
              <el-button type="primary"  @click="$router.push(`/home/shop-list`)" plain>返回</el-button>
          </el-empty>
      </template>
      <br>
      <!-- 操作 -->
      <el-button-group  v-if="$store.state.utype === '1'">
          <el-button type="primary"  icon="el-icon-arrow-left" @click="upper" :disabled="uppernone">上一个</el-button>
          <el-button type="primary" @click="lower" :disabled="lowernone" >下一个<i class="el-icon-arrow-right el-icon--right"  ></i></el-button>
      </el-button-group>
      
  </div>
</template>

<script>
import httpApi from '@/http';
import breadcrumb from '../components/breadcrumb.vue';
  export default {
    components: { breadcrumb},
      data(){
          return{
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            srcList: [],
              details:[],
              uppernone : false,
              lowernone : false,
              // 获取参数id，加载当前选中详细信息（发请求）
              id:this.$route.params.id,
              imgnone:true

          }
      },
      methods:{
          detailslist(){
              httpApi.proApi.queryProById({westerndetail_id:this.id}).then(res =>{
                //   console.log("详情",res);
                  this.details = res.data.results[0]
                   if(this.details.img1 == /^(http[^"]*)"/){
                     this.url = this.details.img1
                    }else {
                     this.url = 'http://localhost:3000/images/'+ this.details.img1
                     }
                  for(let i = 1; i< 6; i++){
                    let m = this.details[`img${i}`]
                    if(m == /^(http[^"]*)"/){
                        this.srcList.push(m)  
                    }else{
                        let g = 'http://localhost:3000/images/'+ m
                        this.srcList.push(g)
                    }
                  }
              })

          },
          upper(){
              if(this.id === 1){
                  this.uppernone = true
              }else {
                 this.id --
                 this.detailslist() 
                 
              }
              
          },
          lower(){
              if(this.details.length == 0){
                  this.lowernone = true
              }else{
                 this.id++ 
                 this.uppernone = false
                 this.lowernone = false
                 this.detailslist()
              }   
          }
      },
      mounted(){
            this.detailslist() 
      }
  }
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions-item__content{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 30px;
}
</style>